<template>
	<view class="question">
		<!-- 题干开始 -->
		<view class="title">
		  <block v-if="isShowtype">
			   <text class="type">{{question.type}}</text>
		  </block>
		  
		  <block v-if="question.titletype == 1">
			  <block v-if="isShowNumber">
					<text class="number">题目：</text>
			  </block>
			  <block v-if="isShowSmallNumber">
				  <text class="number">第{{smallNumber}}小题：</text>
			  </block>
			  <text class="title-text">{{question.title}}</text>
		  </block>
		  <block v-if="question.titletype == 2">
			  <block v-if="isShowNumber">
			  	  <text class="number">题目为图片，可点击放大查看</text>
			  </block>
			  <view>
				  <image class="imagetitle" :src="optionTitleImageUrl + question.title" mode="widthFix" @click="showBigImage(optionTitleImageUrl + question.title)"/>
			  </view>
		  </block>
		</view>
		<!-- 题干结束 -->
		<!-- 题目选项开始 -->
		
			<view class="option">
					<!-- A -->
					<view class="option-item" v-if="question.option0 != null" @click="check('aitem','A')" :style="{'color':optionitem.aitem.color}">
						<view class="icon-box">
							<uni-icons class="icon" :type="optionitem.aitem.type" size="60rpx" :color="optionitem.aitem.color"></uni-icons ><text :style="{'display':optionitem.aitem.display}">A</text>
							
						</view>
						{{question.option0}}
					</view>
					<!-- B -->
					<view class="option-item" v-if="question.option1 != null" @click="check('bitem','B')" :style="{'color':optionitem.bitem.color}">
						<view class="icon-box">
							<uni-icons class="icon" :type="optionitem.bitem.type" size="60rpx" :color="optionitem.bitem.color"></uni-icons><text  :style="{'display':optionitem.bitem.display}">B</text>
						</view>
						{{question.option1}}
					</view>
					<!-- C -->
					<view class="option-item" v-if="question.option2 != null" @click="check('citem','C')" :style="{'color':optionitem.citem.color}">
						<view class="icon-box">
							<uni-icons class="icon" :type="optionitem.citem.type" size="60rpx" :color="optionitem.citem.color"></uni-icons><text  :style="{'display':optionitem.citem.display}">C</text>
						</view>
						{{question.option2}}
					</view>
					<!-- D -->
					<view class="option-item" v-if="question.option3 != null" @click="check('ditem','D')" :style="{'color':optionitem.ditem.color}">
						<view class="icon-box">
							<uni-icons class="icon" :type="optionitem.ditem.type" size="60rpx" :color="optionitem.ditem.color"></uni-icons><text  :style="{'display':optionitem.ditem.display}">D</text>
						</view>
						{{question.option3}}
					</view>
					<!-- E -->
					<view class="option-item" v-if="question.option4 != null" @click="check('eitem','E')" :style="{'color':optionitem.eitem.color}">
						<view class="icon-box">
							<uni-icons class="icon" :type="optionitem.eitem.type" size="60rpx" :color="optionitem.eitem.color"></uni-icons><text  :style="{'display':optionitem.eitem.display}">E</text>
						</view>
						{{question.option4}}
					</view>
					<!-- F -->
					<view class="option-item" v-if="question.option5 != null" @click="check('fitem','F')" :style="{'color':optionitem.fitem.color}">
						<view class="icon-box">
							<uni-icons class="icon" :type="optionitem.fitem.type" size="60rpx" :color="optionitem.fitem.color"></uni-icons><text  :style="{'display':optionitem.fitem.display}">F</text>
						</view>
						{{question.option5}}
					</view>
			</view>
	
			<block v-if="isShowNaswer && question.answer">
				<uni-section :title="titletype" :color="color" :titleColor="color" type="line" padding="0 0 20rpx 0">
					<view class="analysis">
						
						<view class="answer">{{question.answer}}</view>
						<view v-if="question.analysis" >
							<view class="analysis-title">
								解析
								<view class="an-line"></view>
							</view>
							<p v-html="question.analysis"></p>
						</view>
					</view>
				</uni-section>
			</block>
		<!-- 题目选项结束 -->
	</view>
</template>

<script>
	export default {
		name:"question-radio",
		data() {
			return {
				/**
				 * answer 用户选择的答案，当多选的时候会存储多项选择结果
				 * titletype 答案卡片的标题
				 * color 答案卡片中的标题颜色
				 * optionitem  A~F选项
				 *     aitem 表示A选项（首字母）
				 *        name A选项的答案内容为A 
				 *        type 选项uni-icon的类型，有对钩和圆圈两种，设置别的也可以但是用不到
				 *        display 选项中的文本是否显示，block显示 ，none 隐藏
				 *        color 选项的颜色，默认是#333 用户选择的是 #00b300 
				 */
				answer:[],
				titletype:"正确答案是：",
				color:"#387fea",
				optionitem:{
					aitem:{
						name:"A",
						type:"circle",
						display:"block",
						color:"#333"
					},
					bitem:{
						name:"B",
						type:"circle",
						display:"block",
						color:"#333",
					},
					citem:{
						name:"C",
						type:"circle",
						display:"block",
						color:"#333"
					},
					ditem:{
						name:"D",
						type:"circle",
						display:"block",
						color:"#333"
					},
					editem:{
						name:"E",
						type:"circle",
						display:"block",
						color:"#333"
					},
					fitem:{
						name:"F",
						type:"circle",
						display:"block",
						color:"#333"
					},
				},
				
			};
		},
		computed:{
			optionTitleImageUrl : () => {
				return getApp().globalData.portImageUrl + "question/"
			}
		},
		props:{
			/**
			 * question ：题
			 * queryObj : /subpkg/question_detail/question_detail的请求参数
			 * isShowtype: 是否显示题目类型
			 * isShowNumber： 是否显示题编号
			 * isShowSmall：是否显示小题编号
			 * smallNumber：小题编号
			 * isShowNaswer：是否显示答案
			 */
			question:{
				type:Object,
				default:{}
			},
			queryObj:{
				type:Object,
				default:{}
			},
			isShowtype:{
				type:Boolean,
				default:true
			},
			isShowNumber:{
				type:Boolean,
				default:true
			},
			isShowSmallNumber:{
				type:Boolean,
				default:false
			},
			smallNumber:{
				type:Number,
				default:1
			},
			isShowNaswer:{
				type:Boolean,
				default:false
			}
		},
		methods:{
			/**
			 * 用户点击选项
			 * 1.当点击选项时改变选项的颜色，再次点击时取消颜色
			 * 2.点击选项时将答案追加到this.answer数组中
			 * 3.与数据库中保存的答案进行比较，并且修改页面啊效果中答案卡片的标题颜色和标题内容
			 * 
			 * @param {String} option 当前点击的选项在optionitem中的选项名称
			 * @param {String} answer 当前点击的选项名A~F
			 */
			check(option,answer){
				let obj = this.optionitem[option]
				let key = Object.keys(this.optionitem);
				if(obj.display == "block"){
					if(this.question.type !== "多选题"){
						key.map((e)=>{
							this.optionitem[e].type="circle"
							this.optionitem[e].color = "#333"
							this.optionitem[e].display = "block"
						})
						this.answer = [];
						this.answer.push(answer)
					}else{
						if(this.answer.indexOf(answer) == -1){
							this.answer.push(answer)
						}
					}
					obj.type="checkbox-filled"
					obj.color = "green"
					obj.display = "none"
				}else{
					obj.type="circle"
					obj.color = "#333"
					obj.display = "block"
					let index = this.answer.indexOf(answer);
					if(index != -1){
						this.answer.splice(index,1);
					}
				}
				//根据答案给出提示语句
				if(this.isSame(this.answer.join(''),this.question.answer)){
					this.titletype = "恭喜回答正确，正确答案是："
					this.color = "#00b300"
				}else if(this.isContain(this.answer.join(''),this.question.answer)){
					this.titletype = "就差一点点就回答正确了，正确答案是："
					this.color = "#00b300"
				}else if(this.answer.length > 0){
					this.titletype = "再接再厉，正确答案是："
					this.color = "#d11a2d"
				}else{
					this.titletype = "正确答案是："
					this.color = "#387fea"
				}
				
			},
			/**
			 * 判断两个字符串是否相等
			 * @param {String} str1  字符串1
			 * @param {String} str2  字符串2
			 */
			isSame(str1,str2){
				let CodeAt1 = 0;
				let CodeAt2 = 0;
				if (str1.length == str2.length){
					for (let i = 0; i < str1.length; i++) {
						CodeAt1 += (str1.charCodeAt(i));
					}
					for (let j = 0; j < str2.length; j++){
						CodeAt2 += str2.charCodeAt(j);
					}
					if (CodeAt1 === CodeAt2){
						for(let k =0;k < str1.length;k++){
							if(str2.indexOf(str1[k]) == -1){
								return false;
							}
						}
						return true;
					} else {
						return false;
					}
				    
				}else{
				   return false;
			    }
		    },
			/**
			 * 判断str1中的字符串是否在str2中存在
			 * @param {String} str1 字符串1
			 * @param {String} str2 字符串2
			 */
			isContain(str1,str2){
				var result = [];
				for(let k =0;k < str1.length;k++){
					result.push(str2.indexOf(str1[k])) 
				}
				if(result.indexOf(1) != -1 || result.indexOf(0) != -1){
					return true;
				}else{
					return false;
				}
			},
			/**
			 * 点击图片题查看大图
			 */
			showBigImage(url){
				uni.previewImage({
					urls:[url],
					showmenu:false
				})
			}
		}
	}
</script>

<style lang="scss">
.question{
	margin-top:20rpx;
	.title{
		text-align: justify;
		font-size:30rpx;
		line-height:50rpx;
		.type{
			display: inline-block;
			width:80rpx;
			background:linear-gradient(to right,#93bdf3,#68d0e3);
			color:#fff;
			text-align: center;
			padding:5rpx 15rpx;
			border-radius: 25rpx;
			line-height:35rpx;
			font-size:25rpx;
			margin-right: 10rpx;
		}
		
		.number{
			line-height:45rpx;
			font-weight: bold;
		}
	}
	.option{
		margin-top:20rpx;
		.option-item{
			margin-bottom:20rpx;
			display: flex;
			align-items: center;
			justify-content: left;
			.icon-box{
				position: relative;
				height:60rpx;
				width:60rpx;
				text-align: center;
				line-height: 60rpx;
				margin-right:15rpx;
				.icon{
					position: absolute;
					top:0;
					left:0;
					font-weight: normal;
				}
			}
		}
	}
}
.answer{
	font-size:35rpx;
	line-height:45rpx;
}
.analysis-title{
	height:35rpx;
	line-height:35rpx;
	text-align: center;
	background:linear-gradient(to right,#68d0e3,#93bdf3);
	color:#fff;
	border-radius: 17rpx;
	margin-bottom:15rpx;
	letter-spacing:25rpx;
	margin-top:15rpx;
}
.analysis{
	font-size:25rpx;
	line-height:30rpx;
	margin:0px 30rpx;
}
.imagetitle{
	width: 100%;
}

</style>
